<template>
  <view>
    <view v-if="token">
      <!-- 用户信息 -->
      <view class="userinfo">
        <template v-if="true">
          <!-- 头像模糊背景 -->
          <image class="avatar-bg" :src="avatarUrl || defaultSrc" mode="aspectFill" />
          <!-- 头像 -->
          <view class="avatar">
            <image class="img-avatar" :src="avatarUrl || defaultSrc" mode="aspectFill" />
            <button class="btn-avatar" @chooseavatar="chooseAvatar" open-type="chooseAvatar">
              获取头像
            </button>
          </view>

          <!-- 昵称 -->
          <input
            :value="nickName || '用户昵称'"
            @blur="getNickName"
            class="nickname"
            type="nickname"
          />
        </template>
        <template v-else>
          <button type="primary" @click="login">用户登录</button>
          <!-- <button type="primary" @click="update">修改yes的值</button> -->
        </template>
      </view>
      <!-- 订单导航 -->
      <view class="nav">
        <view class="nav-item" v-for="item in nav" :key="item.type">
          <u-icon size="50rpx" :name="item.icon"></u-icon>
          <text class="nav-text">{{ item.title }}</text>
        </view>
      </view>
      <!-- 单元格 -->
      <view class="cell">
        <u-cell-group :border="false">
          <u-cell icon="kefu-ermai" value="10086">
            <view class="cell-title" slot="title">
              联系客服
              <button class="cell-button" open-type="contact">客服按钮</button>
            </view>
          </u-cell>
          <u-cell icon="edit-pen">
            <view class="cell-title" slot="title">
              意见反馈
              <button class="cell-button" open-type="feedback">反馈按钮</button>
            </view>
          </u-cell>
          <u-cell icon="setting">
            <view class="cell-title" slot="title">
              系统设置
              <button class="cell-button" open-type="openSetting">设置</button>
            </view>
          </u-cell>
          <u-cell icon="info-circle" value="v1.0.0">
            <view class="cell-title" slot="title">当前版本</view>
          </u-cell>
        </u-cell-group>
        <button type="warn" plain>退出登录</button>
      </view>
    </view>
    <view v-else>
      <button type="primary" @click="login">用户登录</button>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState('user', ['token']),
    // vuex 模块 辅助函数mapstate  ----- 搜索的关键词一定要精准
    // ...mapState('user', ['yesOrNo']),
    // ...mapState(['user/yesOrNo']),
    // this.$store.commit('user/mutatuon')
    // this.$store.dispatch('user/dispatch')
  },
  data() {
    return {
      avatarUrl: '',
      nickName: '',
      // 默认图片地址
      defaultSrc:
        'https://img0.baidu.com/it/u=324754129,1809452373&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=500',
      nav: [
        { type: 1, icon: 'order', title: '全部订单' },
        { type: 2, icon: 'rmb-circle', title: '待付款' },
        { type: 3, icon: 'car', title: '待收货' },
        { type: 4, icon: 'reload', title: '退货/退款' },
      ],
    };
  },
  methods: {
    chooseAvatar(e) {
      console.log(e);
      this.avatarUrl = e.detail.avatarUrl;
    },
    getNickName(e) {
      console.log(e);
      this.nickName = e.detail.value;
    },
    login() {
      const that = this;
      // 后端的接口需要5个参数， 需要从wx.getUserInfo  + wx.login 这两个微信api里面获取
      wx.getUserInfo({
        success: (res) => {
          console.log(111, res); // 这里得到了4个参数

          wx.login({
            success: async (res2) => {
              console.log(222, res2);

              const res3 = await uni.$u.http.post('/users/wxlogin', {
                encryptedData: res.encryptedData,
                rawData: res.rawData,
                iv: res.iv,
                signature: res.signature,
                code: res2.code,
              });

              console.log(333, res3.data?.message?.token);
              if (res3.data?.message?.token) {
                // 通过vuex 保存起来， 还要数据持久化
                that.$store.commit('user/updateToken', res3.data?.message?.token);
              } else {
                wx.showToast({
                  title: '登录失败',
                  icon: 'none',
                });
              }
            },
          });
        },
      });
    },
    // update() {
    //   this.$store.commit('user/updateYesOrNo');
    // },
  },
};
</script>

<style lang="scss">
// 页面背景
page {
  background-color: #f9f9f9;
}
// 用户信息
.userinfo {
  height: 330rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .avatar-bg {
    z-index: -1;
    width: 120%;
    height: 120%;
    position: absolute;
    // 滤镜: 模糊
    filter: blur(30rpx);
    left: -10%;
    top: -10%;
  }
  .avatar {
    position: relative;
    border-radius: 50%;
    width: 172rpx;
    height: 172rpx;
    .img-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .btn-avatar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
    }
  }
  .nickname {
    color: #fff;
    margin-top: 20rpx;
    text-shadow: 2rpx 2rpx 10rpx #333;
    text-align: center;
  }
}

// 导航列表
.nav {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  height: 144rpx;
  display: flex;
  justify-content: space-around;
  .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .nav-text {
      font-size: 26rpx;
      margin-top: 16rpx;
      color: #474747;
    }
  }
}

// 单元格
.cell {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  height: 520rpx;
  .cell-title {
    position: relative;
    .cell-button {
      // 透明度为 0
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
}
</style>
